<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../vue.js"></script>
</head>

<body>
  <!-- 在点击切换登陆方式的时候, 如果用户已经在input框内填入了一些信息, 那么点击切换后, 切换后显示的input框内会保留这些信息 -->
  <!-- 按道理说, 一个input框内填写的内容应该不会切换到另外一个input框 -->
  <!-- 原因是,在vue进行页面渲染的时候, 不是直接渲染dom的, 而是先创建一个虚拟dom, 然后分析这个虚拟dom, 判断哪些标签要被渲染, 哪些标签不需要被渲染 -->
  <!-- 而且出于性能的考虑, vue会尽可能地复用已经创建的虚拟dom中的元素, 而不是重新创建元素 -->
  <!-- 解决方案, 在不需要进行保留的input框内添加, key属性, 并且设置key的属性值不相同, 即可告诉vue这个input框内的内容不保留 -->
  <div id="app">
    <div v-if="EmailOrUser">
      <label for="username">账号登陆:</label>
      <input type="text" placeholder="请输入账号" id="username" key="username">
    </div>
    <div v-else>
      <label for="email">邮箱登陆:</label>
      <input type="email" placeholder="请输入邮箱" id="email" key="email">
    </div>
    <button @click="changeLogin">切换登陆方式</button>
  </div>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        EmailOrUser: true
      },
      methods: {
        changeLogin() {
          this.EmailOrUser = !this.EmailOrUser;
        }
      }
    })
  </script>
</body>

</html>